<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		     <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		<!--
		属性jquery的朋友应该很熟悉这个“on”，对于时间的监听和绑定，jquery里面最常用的就是on了。同样，在Vue里面，v-on指令用来绑定标签的事件，其语法和v-bind基本类似。
		
		v-on:event="expression";-->
		<div id="app">
		        <h1>姓名：<label v-text="name"></label></h1>
		        <h1>性别：{{ sex }}</h1>
		
		         <!--函数体写在事件中-->
		        <button  v-on:click="if(sex=='男')name='王五';else name='李四';">年龄递增</button>
		    </div>
		
		  
		    <script type="text/javascript">
		    //Model
		    var data1 = {
		        sex: '男',
				name: '李四'
		    }
		
		    //ViewModel
		    var vue = new Vue({
		        el: '#app',
		        data: data1,
		    });
		    </script>
	</body>
</html>
